<template>
	<div>


		<el-dialog title="修改参数" :visible.sync="updateModelVisible">
			<el-form label-width="100px">
				<el-form-item label="编号">
					<el-input v-model="updateGoodsProp.goodsPropId" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="属性名称">
					<el-input v-model="updateGoodsProp.goodsPropName" placeholder="请输入内容"></el-input>
				</el-form-item>

				<el-form-item label="属性">
					<el-radio-group v-model="updateGoodsProp.goodsPropClass" @change="changeClass">
						<el-radio :label="1">唯一属性</el-radio>
						<el-radio :label="2">复选属性</el-radio>
						<el-radio :label="3">单选属性</el-radio>
					</el-radio-group>
				</el-form-item>


				<el-form-item label="属性">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item v-for="(domain, index) in updateGoodsProp.select" :key="index"
							:prop="'domains.' + index + '.value'">
							<el-input v-model="updateGoodsProp.select[index]"></el-input>
						</el-form-item>

					</el-form>
				</el-form-item>

				<el-form-item v-if="selectVisible">
					<el-button @click="addSelect">新增属性</el-button>
				</el-form-item>





			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="updateGoodsFiled">保存</el-button>
			</div>
		</el-dialog>

















		<el-dialog title="新增参数" :visible.sync="AddGoodPropVisible">
			<el-form label-width="100px">
				<el-form-item label="属性名称">
					<el-input v-model="addGoodsProp.goodsPropName" placeholder="请输入内容"></el-input>
				</el-form-item>

				<el-form-item label="属性类型">
					<el-radio-group v-model="addGoodsProp.goodsPropClass" @change="changeNewClass">
						<el-radio :label="1">唯一属性</el-radio>
						<el-radio :label="2">复选属性</el-radio>
						<el-radio :label="3">单选属性</el-radio>
					</el-radio-group>
				</el-form-item>


				<el-form-item label="属性">
					<el-form :inline="true" class="demo-form-inline">
						<el-form-item v-for="(domain, index) in addGoodsProp.select" :key="index"
							:prop="'domains.' + index + '.value'">
							<el-input v-model="addGoodsProp.select[index]"></el-input>
						</el-form-item>

					</el-form>
				</el-form-item>

				<el-form-item v-if="NeWselectVisible">
					<el-button @click="addNewSelect">新增属性</el-button>
				</el-form-item>





			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="clearAddForm()">重置</el-button>
				<el-button type="primary" @click="AddGoodProp">保存</el-button>
			</div>
		</el-dialog>













		<div id="">

			<div class="searchWord">

				<el-form :inline="true" class="demo-form-inline">
					<el-form-item>
						<el-button type="primary" plain @click="goback()">返回上一页</el-button>
					</el-form-item>




					<el-form-item label="模糊条件">
						<el-input v-model="findParam.queryCriteria.key" style="width: 300px;" class='searchs'
							placeholder="请输入搜索内容">
						</el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" round @click="search()">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" plain @click="openNewGoodPropMoedel()">新增属性</el-button>

					</el-form-item>
					<el-form-item>
						<el-button type="danger" icon="el-icon-delete" circle :disabled="this.deleIds.length === 0"
							@click="deleteGoodsProp"></el-button>
					</el-form-item>
				</el-form>

			</div>


			<el-table :data="listGoodsProps" style="width: 100%" border @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column prop="goodsPropId" label="编号" width="180">
				</el-table-column>
				<el-table-column prop="goodsPropName" label="属性类型" width="180">
				</el-table-column>
				<el-table-column prop="goodsPropSelect" label="属性名" width="180">
				</el-table-column>

				<el-table-column fixed="right" label="操作" width="300">
					<template slot-scope="scope">
						<el-button type="warning" plain @click="openGoodsFileModel(scope)">修改</el-button>
					</template>

				</el-table-column>


			</el-table>
		</div>
		<div id="">
			<el-pagination :current-change="findParam.indexPage" background layout="sizes,prev, pager, next, jumper"
				:total="total" :page-sizes="size" :page-size="findParam.pageSize" @current-change="changePage"
				@size-change="changePageSize">
			</el-pagination>


		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addGoodsProp: {
					goodsPropName: null,
					goodsPropClass: null,
					select: [],
					goodsPropgroupId: null
				},
				NeWselectVisible: true,
				AddGoodPropVisible: false,
				selectVisible: false,
				updateModelVisible: false,
				findParam: {
					indexPage: 1, //当前页码
					pageSize: 5, //当前页码能看几条
					// 给他一个默认值可以修改
					queryCriteria: {
						id: null,
						key: null
					}
				},
				total: 0,
				size: [1, 3, 5, 10, 20, 30],
				deleIds: [],
				listGoodsProps: [],
				updateGoodsProp: []
			}

		},
		methods: {
			goback() {
				this.$router.push("/main/goodsPropgroup")
			},
			AddGoodProp() {
				// /goods-prop/saveGoodsProp.do

				this.$http.post('/goods-prop/saveGoodsProp.do', this.addGoodsProp)
					.then(resp => {
						if (resp.data.code == 200) {

							this.$message({
								type: 'success',
								message: '添加成功 '
							});
							this.ListGoodsProp();
							this.AddGoodPropVisible = false;
							//初始化勾选
							this.clearAddForm();
						} else {
							this.$message({
								type: 'error',
								message: '添加失败 ' + resp.data.msg
							});
						}

					})

			},
			clearAddForm() {
				this.addGoodsProp = {
					goodsPropName: null,
					goodsPropClass: null,
					select: [],
					goodsPropgroupId: null
				}
			},
			openNewGoodPropMoedel() {
				// this.clearAddForm();
				if (this.addGoodsProp.select.length == 0) {
					this.addNewSelect();
				}
				this.addGoodsProp.goodsPropgroupId = this.findParam.queryCriteria.id;
				this.AddGoodPropVisible = true
			},
			search() {
				this.ListGoodsProp();
			},
			deleteGoodsProp() {
				// console.log(this.deleIds)
				this.$http.post('/goods-prop/removeGoodsPropByIds.do', this.deleIds)
					.then(resp => {
						if (resp.data.code == 200) {

							this.$message({
								type: 'success',
								message: '删除成功 '
							});
							this.ListGoodsProp();
							//初始化勾选
							// this.deleIds = [];
						} else {
							this.$message({
								type: 'error',
								message: '删除失败 ' + resp.data.msg
							});
						}

					})

			},
			updateGoodsFiled() {
				// /goods-prop/updateGoodsProp.do
				this.$http.post('/goods-prop/updateGoodsProp.do', this.updateGoodsProp)
					.then(resp => {
						if (resp.data.code == 200) {

							this.$message({
								type: 'success',
								message: '修改成功 '
							});

							this.ListGoodsProp();
							this.updateModelVisible = false;
						} else {
							this.$message({
								type: 'error',
								message: '修改失败 ' + resp.data.msg
							});
						}

					})
			},
			changeNewClass(index) {
				if (index == 1) {
					this.addGoodsProp.select.splice(1, this.addGoodsProp.select.length);
					this.NeWselectVisible = false;
				} else {
					this.NeWselectVisible = true;
				}
			},
			changeClass(index) {
				if (index == 1) {
					this.updateGoodsProp.select.splice(1, this.updateGoodsProp.select.length);
					this.selectVisible = false;
				} else {
					this.selectVisible = true;
				}
			},
			addSelect() {
				this.updateGoodsProp.select.push('');
			},
			addNewSelect() {
				this.addGoodsProp.select.push('');
			},
			openGoodsFileModel(scope) {
				this.$http.post("/goods-prop/getGoodsPropById.do/" + scope.row.goodsPropId)
					.then(resp => {
						if (resp.data.code = 200) {
							this.updateGoodsProp = resp.data.data;
							this.updateModelVisible = true;
							this.changeClass(resp.data.data.goodsPropClass)
						}

					})
			},
			//加载电影
			ListGoodsProp() {

				this.$http.post("/goods-prop/listGoodsPropBySmallerId.do", this.findParam)
					.then(resp => {
						if (resp.data.code = 200) {
							this.listGoodsProps = resp.data.data.list;
							this.total = resp.data.data.total;
							this.findParam.indexPage = resp.data.data.indexPage;
							this.deleIds = [];
						}

					})
			},
			changePage(page) {
				this.findParam.indexPage = page;
				this.ListGoodsProp();
			},
			changePageSize(size) {
				this.findParam.pageSize = size;
				this.ListGoodsProp();
			},
			handleSelectionChange(val) {
				//获取勾选的内容

				//初始化
				this.deleIds = [];
				for (let i = 0; i < val.length; i++) {
					this.deleIds.push(val[i].goodsPropId);
				}
			}
		},
		created() {
			let json = localStorage.getItem("goodsPropgroupId");
			if (json == undefined || json == null) {
				this.goback();
			}


			this.findParam.queryCriteria.id = json;
			this.ListGoodsProp();
		}
	}
</script>

<style scoped>

</style>
